<template>
  <div class="course_countent">
    <!-- 班级 -->
    <el-card class="box-card" >
      <el-row type="flex">
        <el-col :span="12" class="class_col">
          <el-row class="class_name">
            <img src="@/assets/common/yuanquan.png" alt="">
            长沙黑马HTML&JS+前端就业40期（20210822新型面授）</el-row>
          <el-row :style="styPaddingLeft">
            授课时间：21年08月22日-22年03月22日
            <el-button type="primary" size="small" plain @click="dialogVisible = true">
              <i class="el-icon-date"></i>查看课表
            </el-button>
            <el-dialog width="50%" :visible.sync="dialogVisible">
              <div >
                <el-row>
                  <el-col :span="16">
                    <el-calendar >
                      <template v-slot:dateCell="{ date, data }">
                        <div class="course_cell" @click="getNewDay(data)">
                          <span>{{ data.day | getDay }}</span>
                          <div v-if="!isWeek(date)" class="rest">课</div>
                        </div>
                      </template>
                    </el-calendar>
                  </el-col>
                  <el-col :span="6">
                    <div class="course_particulars">
                      <daiv style="text-align: center" >
                        <h4 v-if="isShow">
                          {{ value.getFullYear()}}-{{value.getMonth() == 0 ? '1' : value.getMonth()}}-{{value.getDate() }}
                        </h4>
                        <h4 v-else>{{ newday }}</h4>
                      </daiv>
                      <div class="margin_bottom"><i class="el-icon-notebook-1"></i>课程：</div>
                      <div><span>Vue团队项目实战</span></div>
                      <div class="margin_bottom"><span style="color: #999">全天有课</span></div>
                      <div class="margin_bottom"><i class="el-icon-user"></i>讲师</div>
                      <div class="margin_bottom"><span>刘学良</span></div>
                      <div class="margin_bottom"><i class="el-icon-map-location"></i>教室</div>
                      <div class="margin_bottom"><span>长沙新411</span></div>
                      <div class="margin_bottom"><i class="el-icon-edit-outline"></i>备注</div>
                      <div><span>项目实战</span></div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-dialog>
          </el-row>
          <el-row :style="styPaddingLeft">
            班主任：苏胜男 钟敏 贵一
          </el-row>
        </el-col>
        <el-col :span="12" class="class_col_two">
          <el-row type="flex" class="studyCase" justify="end">
            <el-col :span="8">
              <el-col><i class="el-icon-edit edit"></i></el-col>
              <p>考试</p>
            </el-col>
            <el-col :span="8">
              <el-col><i class="el-icon-star-on"></i></el-col>
              <p>评分</p>
            </el-col>
            <el-col :span="8">
              <el-col><i class="el-icon-tickets"></i></el-col>
              <p>作业</p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <!-- 今日课程 -->
    <el-card class="box-card" >
      <el-row type="flex">
        <el-col :span="12" class="class_col">
          <el-row class="class_name newClass">
            <img src="@/assets/common/project-label.svg" alt="">
            Vue团队项目实战
            <el-button type="warning" size="mini" plain disabled>今日有课</el-button>
          </el-row>
          <el-row class="newClassTime" :style="styPaddingLeft">
            时间：2022.01.17-2022.01.21（全天有课）
          </el-row>
          <el-row :style="styPaddingLeft">
            老师：刘学良  教室：长沙新411
          </el-row>
        </el-col>
        <el-col :span="12" class="disabled_button" justify="end">
          <el-row type="flex" class="studyCase" span="25"  >
            <el-col :span="5" >
              <el-button size="mini" :style="{'border':'none'}" disabled>
                <i class="el-icon-s-data"></i>去上课
              </el-button>
            </el-col>
            <el-col :span="5">
              <el-button size="mini" :style="{'border':'none'}" disabled>
                <i class="el-icon-postcard"></i>随堂测
              </el-button>
            </el-col>
            <el-col :span="5">
              <el-button size="mini" :style="{'border':'none'}" disabled>
                <i class="el-icon-collection"></i>每日反馈
              </el-button>
            </el-col>
            <el-col :span="5">
              <el-button size="mini" :style="{'border':'none'}" disabled>
                <i class="el-icon-edit"></i>练习
              </el-button>
            </el-col>
            <el-col :span="5">
              <el-button size="mini" :style="{'border':'none'}" disabled>
                <i class="el-icon-reading"></i>作业
              </el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <!-- 课程名称 -->
    <div class="tabs">
      <el-tabs class="tabs_countent" type="border-card">
        <el-tab-pane label="随堂课">
          <attend-class />
        </el-tab-pane>
        <el-tab-pane label="就业课">
          <employment-class/>
        </el-tab-pane>
        <el-tab-pane label="拓展课">
          <expand-class/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import AttendClass from './components/attend-class.vue'
import EmploymentClass from './components/employment-class.vue'
import ExpandClass from './components/expand-class.vue'
export default {
  components: { AttendClass, EmploymentClass, ExpandClass },
  name: 'Course',
  filters: {
    getDay (value) {
      const day = value.split('-')[2]
      return day
    }
  },
  data () {
    return {
      styPaddingLeft: {
        paddingLeft: '29px'
      },
      dialogVisible: false,
      value: new Date(),
      newday: '',
      nowday: '',
      isShow: true
    }
  },
  methods: {
    isWeek (date) {
      return date.getDay() === 6 || date.getDay() === 3
    },
    getNewDay (date) {
      const newDay = date.day
      this.newday = newDay
      this.isShow = false
    }
  }
}
</script>

<style lang="scss">
$bg: #f5f7fa;
.course_countent {
  margin: 10px;
  .box-card {
    margin-bottom: 20px;
    .class_col {
      font-size: 12px;
      .class_name {
        font-size: 18px;
        color: #247ffc;
        img {
          width: 15px;
          height: 15px;
          background-size: 20px;
        }
      }
      .course_particulars {
        width: 200px;
        height: 316px;
        font-size: 14px;
        border: none;
        background-color: #f5f7fa;
        .margin_bottom {
          margin-bottom: 15px;
        }
        i {
          color: #f57726;
        }
        span {
          font-size: 10px;
        }
      }
      .course_cell{
        border: none;
      }
      .newClass {
          color: black;
      }
      .newClassTime {
        margin: 10px 0;
      }
    }
    .class_col_two {
      padding-top: 20px;
    }
    .disabled_button{
      padding-top: 20px;
    }
  }
  .el-calendar-day {
    width: 90%;
    height: 90%;
    text-align: center;
    border-radius: 8px;
  }
  .tabs {
    position: relative;
    .search {
      position: absolute;
      top: 0;
      right: 90px;
      width: 200px;
    }
    .search_button{
      position: absolute;
      top:0;
      right: 10px;
    }
    .el-tabs__header {
      background-color: #fff;
    }
    .el-tabs--border-card>.el-tabs__content {
      padding: 15px 0;
    }
    .el-tabs__item.is-active {
      background-color: #247ffc!important;
      color: #fff;
    }
    #tab-0 {
      margin-right: 10px;
      background-color: #F5F7FA;
    }
    #tab-1 {
      margin-right: 10px;
      background-color: #F5F7FA;
    }
    #tab-2 {
      margin-right: 10px;
      background-color: #F5F7FA;
    }
  }
}
</style>
